<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>
        Realistic water visualization in 3D | Sample | ArcGIS API for JavaScript 4.17
    </title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.17/"></script>

    <script>
        require([
            "esri/WebScene",
            "esri/views/SceneView",
            "esri/layers/FeatureLayer",
            "esri/widgets/Slider"
        ], function(WebScene, SceneView, FeatureLayer, Slider) {
            const webscene = new WebScene({
                portalItem: {
                    id: "8ede93ea9d8d48bc8cdcbea775936a13"
                }
            });

            const view = new SceneView({
                container: "viewDiv",
                map: webscene,
                qualityProfile: "high"
            });

            webscene.when(function() {
                view.environment.lighting.waterReflectionEnabled = true;
            });

            const waterLayer = new FeatureLayer({
                url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Water_bodies/FeatureServer",
                elevationInfo: {
                    mode: "absolute-height",
                    offset: 0
                },
                renderer: {
                    type: "simple",
                    symbol: {
                        type: "polygon-3d",
                        symbolLayers: [{
                            type: "water",
                            waveDirection: 260,
                            color: "#25427c",
                            waveStrength: "moderate",
                            waterbodySize: "medium"
                        }]
                    }
                }
            });
            webscene.add(waterLayer);
        });
    </script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        
        #menu {
            padding: 1em;
        }
        
        #waveSlider {
            height: 50px;
            margin-top: 2em;
        }
        
        .color-btn {
            border: 1px solid rgb(173, 172, 172);
            width: 40px;
            height: 20px;
            cursor: pointer;
        }
        
        #navy {
            background-color: #25427c;
        }
        
        #green {
            background-color: #039962;
        }
        
        #turqoise {
            background-color: #a2f9f5;
        }
    </style>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="menu" class="esri-widget">
        <h4>Wave direction</h4>
        <div id="waveSlider"></div>
        <h4>Wave strength</h4>
        <input type="radio" name="waveStrengthRadio" value="calm" id="calm" /><label for="calm">Calm</label><br />
        <input type="radio" name="waveStrengthRadio" value="rippled" id="rippled" /><label for="rippled">Rippled</label><br />
        <input type="radio" name="waveStrengthRadio" value="slight" id="slight" /><label for="slight">Slight</label><br />
        <input type="radio" name="waveStrengthRadio" value="moderate" id="moderate" checked /><label for="moderate">Moderate</label><br />
        <h4>Dominant color</h4>
        <button id="navy" class="color-btn"></button>
        <button id="green" class="color-btn"></button>
        <button id="turqoise" class="color-btn"></button>
        <br/>
        <input type="checkbox" id="reflection" checked /><label for="reflection">Water reflections</label>
        <div style="background-color: rgb(90, 157, 245);top: 0px;bottom: 0px;"></div>
    </div>
</body>

</html>